﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

    <title>Media Playback</title>

    <!-- WinJS references 
    <script type="text/javascript" src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script type="text/javascript" src="//Microsoft.WinJS.0.6/js/ui.js"></script>
    <link rel="Stylesheet" type="text/css" href="//Microsoft.WinJS.0.6/css/ui-light.css" />-->

    <!-- SDK Base references -->
    <link rel="stylesheet" type="text/css" href="css/base-sdk.css" />
    <script type="text/javascript" src="js/base-sdk.js"></script>
    <script type="text/javascript" src="js/jstoolkit-sdk.js"></script>

    <!-- Sample references -->
    <link rel="stylesheet" type="text/css" href="css/program.css" />
    <script type="text/javascript" src="js/program.js"></script>
<script src="js/localizedStrings.js" type="text/javascript"></script>
<style type="text/css">body {
	width:336px;
	height:250px;
	text-align:center;
	font-family: Segoe UI, Arial, Microsoft Yahei ,Microsoft JhengHei , Helvetica, sans-serif, Simsun, Verana;
	font-size:12px;
	background-color:#F50606;
	margin: 0px;
	color:#466480;
	scrollbar-arrow-color:#25698E;
	scrollbar-base-color:#5DBFF4;
	
}
#scenario1Input button, #scenario2Input button
{
    margin-bottom:10px;
}
#keyslist {
	height:80px;
	width:310px;
	overflow:auto;
	line-height:80px;
	z-index:5;
	position:absolute;
	left:10px;top:15px;
}
img {
	border:0px;
	hide-focus: expression(this.hideFocus=true); /* for ie 5+ */
    outline: none; /* for firefox 1.5 + */
}
 a {
	color:#375D70;
	padding: 0px 1px 1px 1px;
	font-weight: bold;
}
 a:hover{
	background-color:#375D70;
	color: #98C1D3;
}
#cool_web{
	margin-top:5px;
	font-size:9px;
	line-height:11px;
}
#info_tab {
	color: #466480;
}

</style>

</head>

<body role="application" unselectable="off" scroll="yes">
<g:background id="imgBackground" src="images/flyout.png" style="position:absolute;top:0px;left:0px;" />

<div id="rootGrid">
        <div id="header" role="contentinfo"></div>
        <div id="content">
            <h1 id="featureLabel">Media Playback</h1>

            <h2 id="inputLabel">Input</h2>

            <div id="input" role="main" aria-labelledby="inputLabel">
                <div class="options">
                    <h3 id="listLabel">Select scenario:</h3>
                    <select size="4" id="scenarios" aria-labelledby="listLabel">
                    </select>
                </div>
                <div class="details" role="region" aria-labelledby="descLabel" aria-live="assertive">
                    <h3 id="descLabel">Description:</h3>     
                </div>
            </div>

            <h2 id="outputLabel">Output</h2>

            <div id="output" role="region" aria-labelledby="outputLabel" aria-live="assertive">
                <div id="statusMessage"></div>
            </div>
        </div>
        <div id="footer" role="contentinfo"></div>
    </div><div id="keyslist"><img alt="" src="images/keymap_en.gif" id="keymap"/></div>
	<table id="info_tab" style="width:310px;margin:0px 10px 0px 10px;position:absolute; top:100px;left:0px;">

	</table>
<script type="text/javascript" >
 
	document.getElementById("Development").innerHTML = L_localizedStrings_Development; 
	
	var keycodetype=L_localizedStrings_keycodetype;
	try{
		keycodetype=System.Gadget.Settings.read("keycodetype");
    	if (keycodetype) {
    		document.getElementById("keymap").src="images/keymap_"+keycodetype+".gif";
    	}else{
    		document.getElementById("keymap").src="images/keymap_"+L_localizedStrings_keycodetype+".gif";
    	}
    }catch(err){document.getElementById("keymap").src="images/keymap_"+L_localizedStrings_keycodetype+".gif";
}

</script>
</body>

</html>
